import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,TextInput
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import DeviceStorage from '../../common/DeviceStorage';
import {BASEURL} from '../../api/api';
import { TipModal} from '../../component/Tips';
const dismissKeyboard = require('dismissKeyboard');
export default class NickName extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title: navigation.getParam('title'),
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      text: this.props.navigation.getParam('text'),
      userId: this.props.navigation.getParam('userId'),
      index: this.props.navigation.getParam('index'),
    })
  }
  _change(val){
    this.setState({text: val})
  }
  _saveUser(){
    let {index} = this.state;
    let param = '&nickname='+this.state.text;
    if( index == 2) param = '&userName='+this.state.text;
    if( index == 3) param = '&userSex='+this.state.text;
    if( index == 6) param = '&userIndustry='+this.state.text;
    if( index == 7) param = '&userCompany='+this.state.text;
    if( index == 8) param = '&userPost='+this.state.text;
    if( index == 9) param = '&userScale='+this.state.text;
    
    //console.log(BASEURL+'per/saveUserInfo?'+JSON.stringify(userInfo))
    this.refs.tipModal._loading();
    fetch(BASEURL+'per/saveUserInfo?userId='+this.state.userId+param)
    .then(res => res.json())
    .then(result => {
      this.refs.tipModal._close();
      console.log('res',result);
      if(result.succ == '1'){
        this.refs.toast.show("设置成功");
        setTimeout(()=>{
          const {goBack,state} = this.props.navigation;
          state.params.callback(this.state.text);
          this.props.navigation.goBack(); 
        },1500)
      }
    })
  }
  _save(){
    dismissKeyboard();
    let {text, index} = this.state;
    if(index == 1){
      if(!text || text.length<4 || text.length>16){
        this.refs.toast.show("昵称的长度为4-20个字符");
        return;
      }
    } else {
      if(!text){
        this.refs.toast.show("不能为空哦");
        return;
      }
    }
   
    this._saveUser()
    //DeviceStorage.save("nickName",nickName);
    //this.refs.toast.show("设置成功");
    
    
  }

  render(){
    let {index, text} = this.state;
    let lable = '昵称'
    if (index == 2) lable = '姓名'
    if (index == 3) lable = '性别'
    if (index == 6) lable = '行业'
    if (index == 7) lable = '企业名称'
    if (index == 8) lable = '职位'
    if (index == 9) lable = '规模'
    const cirStyle = {
      width: 16,
      height:16,
      borderRadius: 8,
      borderWidth:1,
      borderColor: '#999',
      justifyContent:'center',
      alignItems:'center',
    }
    const row = {
      flexDirection:'row',
      justifyContent:'center',
      alignItems:'center',
      marginLeft:10,
      marginRight:10,
    }
    const textStyle = {
      color: '#555',
      marginLeft:5
    }
    const selText = {
      backgroundColor:'#2596ff',
      width: 8,
      height: 8,
      borderRadius: 4,
    }
    return(
      <View style={styles.container}>
        <View style={styles.inputView}>
          <Text style={styles.nameText}>{lable}</Text>
          {
            index != 3?
            <View style={{flex:1, flexDirection:'row',alignItems:'center',}}>
              <TextInput 
                ref={this.props._ref}
                placeholder={this.props.placeholder}
                style={styles.searchInput}
                underlineColorAndroid="transparent"
                onChangeText={(val)=>this._change(val)}
                value={this.state.text}
                returnKeyType='done'
                placeholderTextColor='#eee'
              />
              <TouchableOpacity onPress={()=>{this.setState({nickName:''})}}>
                <Image style={styles.closeStyle} source={require('../../images/mine/icon_close.png')} />
              </TouchableOpacity>
            </View>
            :
            <View style={{paddingTop:12,paddingBottom:12,flexDirection:'row',justifyContent:'center',flex:1}}>
              <TouchableOpacity style={row} onPress={()=>{this.setState({text: '男'})}}>
                <View style={cirStyle}>
                  <View style={text=='男'?selText:null}></View>
                </View>
                <Text style={textStyle}>男</Text>
              </TouchableOpacity>
              <TouchableOpacity style={row} onPress={()=>{this.setState({text: '女'})}}>
                <View style={cirStyle}>
                  <View style={text=='女'?selText:null}></View>
                </View>
                <Text style={textStyle}>女</Text>
              </TouchableOpacity>
              <TouchableOpacity style={row} onPress={()=>{this.setState({text: '保密'})}}>
                <View style={cirStyle}>
                  <View style={text=='保密'?selText:null}></View>
                </View>
                <Text style={textStyle}>保密</Text>
              </TouchableOpacity>
            </View>
          }
          
        </View>
        {
          index == 1?<Text style={styles.tipText}>4-20个字符，可由中英文、数字、"_"、"-"组成</Text>
          :null
        }
        
        <MyButton btnStyle={{marginTop:60,}}  text='确 定' press={()=>{this._save()}}/>
        <Toast ref="toast" position='bottom' positionValue={200} />
        <TipModal ref="tipModal"/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  closeStyle:{
    width:16,
    height:16,
  },
  tipText:{
    paddingTop:10,
    paddingBottom:10,
    paddingLeft:15,
    color:'#999'
  },
  nameText:{
    fontSize:16,
    color: '#333',
  },
  container: {
    backgroundColor:'#eee',
    flex: 1,
  },
  searchInput:{
    marginLeft:15,
    padding:0,
    flex:1,
    height: 46, 
    fontSize:15,
  },
  inputView:{
    marginTop:10,
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:15,
    paddingRight:15,
    backgroundColor:'white',
    //borderWidth:1,
    //borderColor:'white',
  },

})